<template>
    <div class="sample-sending-information">
        <div class="common-title">
            <h1>送样信息查看</h1>
            <p>VIEW SAMPLE INFORMATION</p>
        </div>
        <ul class="sample-sending-detail">
            <li>
                <span class="sample-delivery-properties">联系人</span>
                <span class="sample-delivery-attribute-value">{{name}}</span>
            </li>
            <li>
                <span class="sample-delivery-properties">联系电话</span>
                <span class="sample-delivery-attribute-value">{{phone}}</span>
            </li>
            <li>
                <span class="sample-delivery-properties">送样地址</span>
                <span class="sample-delivery-attribute-value">{{area}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    import {
        sampleSendingInformation
    } from "@/api/common";
    export default {
        data() {
            return {
                name: '',
                phone: '',
                area: ''
            }
        },
        mounted() {
            this.getSampleSendingInformation();
        },
        methods: {
            getSampleSendingInformation() {
                sampleSendingInformation().then( res => {
                    let data = res.data.datas.data;
                    this.name = data.name;
                    this.phone = data.phone;
                    this.area = data.area;
                    console.log(res)
                })
            }
        }
    }
</script>

<style scoped>
    .sample-sending-detail {
        width: 100%;
        padding: 0 3%;
        box-sizing: border-box;
    }
    .sample-sending-detail li {
        border-bottom: 1px solid #f0f0f0;
        line-height: 47px;
        display: flex;
    }
    .sample-delivery-properties {
        width: 20%;
        margin-right: 15px;
        color: #333;
        font-size: 16px;
        display: block;
    }
    .sample-delivery-attribute-value {
        width: 75%;
        font-size: 14px;
        color: #333;
    }
</style>
